<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>数据分析</title>
    <!--jquery-->
    <script src="{{ url_for('static', filename='common/jquery-3.6.0.min.js') }}"></script>
    <!--bootstrap-->
    <script src="{{ url_for('static', filename='common/bootstrap/bootstrap.bundle.min.js') }}"></script>
    <script src="{{ url_for('static', filename='common/bootstrap/bootstrap.min.js') }}"></script>
    <link rel="stylesheet" type="text/css"
          href="{{ url_for('static', filename='common/bootstrap/bootstrap.min.css') }}">
    <!--bootstrap-datetimepicker-->
    <script src="{{ url_for('static', filename='common/datepick/bootstrap-datepicker.min.js') }}"></script>
    <script src="{{ url_for('static', filename='common/datepick/bootstrap-datepicker.zh-CN.js') }}"></script>
    <link rel="stylesheet" type="text/css"
          href="{{ url_for('static', filename='common/datepick/bootstrap-datepicker3.min.css') }}">
    <!--echarts-->
    <script src="{{ url_for('static', filename='common/echarts.min.js') }}"></script>
    <!--页面css-->
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='analyse/analyse.css') }}">

    <script>
        $(document).ready(function () {

            // 时间选择组件
            $('#xph1').datepicker({
                language: "zh-CN",
                clearBtn: true,
                autoclose: true,
                todayHighlight: true,
            });
            $('#xph2').datepicker({
                language: "zh-CN",
                clearBtn: true,
                autoclose: true,
                todayHighlight: true,
            });

            //灵活选择模块-显示小类
            $(document).on('click', '.bt1', function () {
                let bigname = $(this).html()
                $.ajax({
                    url: "{{ url_for('export.export2') }}",
                    type: 'post',
                    data: {'bigname': bigname},
                    success: function (data) {
                        $('.data_region1').html(data)
                    },
                    error: function () {
                        $('.tips').html(alert_box(1, '系统故障，请刷新后再尝试一次或联系管理员'))
                    }
                })
            })

            //灵活选择模块-显示大类
            $('#show_bigname').click(function () {
                $.ajax({
                    url: "{{ url_for('export.export3') }}",
                    type: 'post',
                    success: function (data) {
                        $('.data_region1').html(data)
                        $('#box1').attr('value', '')
                        $('#box2').attr('value', '')
                        $('#box3').attr('value', '')
                        $('#box4').attr('value', '')
                    },
                    error: function () {
                        $('.tips').html(alert_box(1, '系统故障，请刷新后再尝试一次或联系管理员'))
                    }
                })
            })

            //灵活选择模块-点击大类的时候自动填入搜索框中
            $(document).on('click', '.bt1', function () {
                let big = $(this).html()
                $('#box1').attr('value', big)
                $('#box3').attr('value', big)
            })

            //灵活选择模块-点击小类的时候自动填入搜索框中
            $(document).on('click', '.bt2', function () {
                let small = $(this).html()
                $('#box2').attr('value', small)
                $('#box4').attr('value', small)
            })

            // 按照所选的模块导出记录
            $('#btn1').click(function () {
                let cmy1 = $('#xph1').val()
                let cmy2 = $('#xph2').val()
                let bigname = $('#box1').val()
                let smallname = $('#box2').val()
                if (time_check(cmy1, cmy2)) {
                    return
                }
                $.ajax({
                    url: "{{ url_for('analyse.analyse2') }}",
                    type: 'post',
                    data: {
                        'a': cmy1,
                        'b': cmy2,
                        'c': bigname,
                        'd': smallname
                    },
                    success: function (data) {
                        $('.pic1').html(data)
                    },
                    error: function () {
                        $('.tips').html(alert_box(1, '系统故障，请刷新后再尝试一次或联系管理员'))
                    }
                })
            })

            // 按照所选的模块导出记录
            $('#btn2').click(function () {
                let cmy1 = $('#xph1').val()
                let cmy2 = $('#xph2').val()
                let bigname = $('#box3').val()
                let smallname = $('#box4').val()
                if (time_check(cmy1, cmy2)) {
                    return
                }
                if (bigname === '' || smallname === '') {
                    $('.tips').html(alert_box(1, '未选择大类或者小类'))
                    return
                }
                $.ajax({
                    url: "{{ url_for('analyse.analyse3') }}",
                    type: 'post',
                    data: {
                        'a': cmy1,
                        'b': cmy2,
                        'c': bigname,
                        'd': smallname
                    },
                    success: function (data) {
                        $('.pic2').html(data)
                    },
                    error: function () {
                        $('.tips').html(alert_box(1, '系统故障，请刷新后再尝试一次或联系管理员'))
                    }
                })
            })


        });

        //时间检查
        function time_check(cmy1, cmy2) {
            if (cmy1 === '' || cmy2 === '') {
                $('.tips').html(alert_box(1, '您未选择起始日期或结束日期'))
                return true
            }
            if (cmy1 > cmy2) {
                $('.tips').html(alert_box(1, '起始日期大于小于结束日期'))
                return true
            }
            return false
        }
    </script>
</head>
<body>
<!--引入警示框组件-->
{% include 'common/common.html' %}
<!--引入导航栏-->
{% include 'login/bar.html' %}
<header>
    <div class="header_title" style="text-align: center">
        <h1 style="color: #646464">数据分析模块</h1>
    </div>
</header>


<!--main是整个大框架-->
<main>
    <!--时间选择框-->
    <div class="box">
        <h3>时间和大类小类选择模块</h3>
        <br>
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text">起始日期</span>
            </div>
            <input type="text" aria-label="First name" class="form-control" id="xph1" autocomplete="new-complete">
            <div class="input-group-prepend">
                <span class="input-group-text">结束日期</span>
            </div>
            <input type="text" aria-label="Last name" class="form-control" id="xph2" autocomplete="new-complete">
        </div>
        <br>
        <div class="data_region1">
            {% include 'export/export_box31.html' %}
        </div>
        <div style="text-align: center;">
            <button type="button" id="show_bigname" class="btn btn-outline-dark" style="width: 80%">显示大类</button>
        </div>
    </div>


    <div class="box">
        <h3>总价值趋势模块</h3>
        <br>
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text">大类名称</span>
            </div>
            <input type="text" aria-label="First name" class="form-control" id="box1" autocomplete="new-complete">
            <div class="input-group-prepend">
                <span class="input-group-text">小类名称</span>
            </div>
            <input type="text" aria-label="Last name" class="form-control" id="box2" autocomplete="new-complete">
            <button type="button" class="btn btn-success" id="btn1">提交</button>
        </div>
        <br>
        <div class="pic1">
            {% include 'analyse/analyse_pic1.html' %}
        </div>
    </div>

    <div class="box">
        <h3>小类的个数和价格走势模块</h3>
        <br>
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text">大类名称</span>
            </div>
            <input type="text" aria-label="First name" class="form-control" id="box3" autocomplete="new-complete">
            <div class="input-group-prepend">
                <span class="input-group-text">小类名称</span>
            </div>
            <input type="text" aria-label="Last name" class="form-control" id="box4" autocomplete="new-complete">
            <button type="button" class="btn btn-success" id="btn2">提交</button>
        </div>
        <br>
        <div class="pic2">
            {% include 'analyse/analyse_pic2.html' %}
        </div>
    </div>
</main>

<footer>
    &nbsp;
</footer>


</body>
</html>